import React, { forwardRef, useImperativeHandle, useState } from 'react'
import { Button, Form, message, Radio } from 'antd'
import { Input, Select, TextArea, InputEdit, InputNumber } from '@/components'
import { renderFormItem } from '@/components/WorkFlow/partials/FormPanel/utils/renderFormItem'
import Modal from '~/components/Modal'
import ReactJson from '@/components/ReactJsonView'
import { SchedulerService } from '@/service'

const AssignModal = (props, ref) => {
  const [visible, setVisible] = useState(false)
  const [form] = Form.useForm()
  const [input, setInput] = useState([])
  const [promise, setPromise] = useState({})
  const [baseData, setBaseData] = useState({})
  const [isOk, setIsOK] = useState(false)
  const onOk = () => {
    form.validateFields().then(value => {
      const data = { ...baseData, input: value }
      SchedulerService.create(data).then(res => {
        setIsOK(true)
        setVisible(false)
      }).catch(err => {
        console.log(err);
        message.error('新增失败')
      })

    })
  }
  const onCancel = () => {
    setVisible(false)
  }
  const handleAfterClose = () => {
    setIsOK(isOk => {
      if (isOk) {
        promise.resolve()
      } else {
        promise.reject()
      }
      return false
    })
    form.resetFields()
  }
  const footer = [
    <Button key="ok" type="primary" onClick={onOk}>
      确定
    </Button>,
    <Button key="cancel" onClick={onCancel}>
      取消
    </Button>
  ]
  useImperativeHandle(ref, () => ({
    initModal: ({ baseData, input, resolve, reject }) => {
      setBaseData(baseData)
      setInput(input)
      setPromise({
        resolve,
        reject
      })
      setVisible(true)
    }
  }))
  const renderFitTypeItem = (type, label, name) => {
    const onChange = val => {
      form.setFieldsValue({ [name]: val })
    }
    switch (type) {
      case 'number':
        return <InputNumber />
      case 'boolean':
        return (
          <Radio.Group
            options={[
              { label: 'true', value: true },
              { label: 'false', value: false }
            ]}
          />
        )
      case 'string':
        return <Input placeholder={`请输入${label}`} />
      case 'array':
        onChange([])
        return <ReactJson json={[]} onChange={onChange} />
      case 'object':
        onChange({})
        return <ReactJson json={{}} onChange={onChange} />
      default:
        return <Input placeholder={`请输入${label}`} />
    }
  }

  return (
    <Modal
      visible={visible}
      title="调度输入配置"
      width={600}
      footer={footer}
      onCancel={onCancel}
      afterClose={handleAfterClose}
    >
      <Form autoComplete="off" form={form} labelCol={{ span: 6 }}>
        {input.map(({ label, value, type, required }) => (
          <Form.Item
            label={`${label} (${value})`}
            name={value}
            rules={[{ required, message: `请输入${label}` }]}
          >
            {renderFitTypeItem(type, label, value)}
          </Form.Item>
        ))}
      </Form>
    </Modal>
  )
}
export default forwardRef(AssignModal)
